<template>
  <div class="feedback-container">
    <div class="feedback-header">
      <h2>意见反馈</h2>
      <p>您的反馈对我们很重要，帮助我们提供更好的服务</p>
    </div>

    <el-form :model="feedbackForm" :rules="rules" ref="feedbackFormRef" class="feedback-form">
      <el-form-item prop="type">
        <el-select v-model="feedbackForm.type" placeholder="请选择反馈类型" class="feedback-select">
          <el-option label="功能建议" value="feature" />
          <el-option label="体验问题" value="experience" />
          <el-option label="内容纠错" value="content" />
          <el-option label="其他" value="other" />
        </el-select>
      </el-form-item>

      <el-form-item prop="content">
        <el-input
          v-model="feedbackForm.content"
          type="textarea"
          :rows="4"
          placeholder="请详细描述您的反馈内容..."
          class="feedback-textarea"
        />
      </el-form-item>

      <el-form-item prop="contact">
        <el-input
          v-model="feedbackForm.contact"
          placeholder="联系方式（选填）"
          class="contact-input"
        />
      </el-form-item>

      <el-form-item>
        <el-button 
          type="primary" 
          @click="submitFeedback" 
          :loading="loading"
          class="submit-button"
        >
          {{ loading ? '提交中...' : '提交反馈' }}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { addFeedback } from '@/api/feedback'
import { useStore } from 'vuex'  // 导入 vuex store

const store = useStore()  // 获取 store 实例

const feedbackFormRef = ref(null)
const loading = ref(false)

const feedbackForm = reactive({
  type: '',
  content: '',
  contact: ''
})

const rules = {
  type: [{ required: true, message: '请选择反馈类型', trigger: 'change' }],
  content: [
    { required: true, message: '请输入反馈内容', trigger: 'blur' },
    { min: 10, message: '反馈内容至少10个字符', trigger: 'blur' }
  ]
}

const submitFeedback = async () => {
  if (!feedbackFormRef.value) return
  
  try {
    await feedbackFormRef.value.validate()
    loading.value = true
    
    // 使用 getters 获取 userInfo
    const userInfo = store.getters.userInfo

    console.log(userInfo.userInfo.id)

    await addFeedback({
      type: feedbackForm.type,
      content: feedbackForm.content,
      contact: feedbackForm.contact,
      userId: userInfo.userInfo.id  // 使用 userInfo 中的 id
    })
    
    ElMessage.success('感谢您的反馈！')
    feedbackFormRef.value.resetFields()
  } catch (error) {
    ElMessage.error('提交失败，请稍后重试')
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.feedback-container {
  max-width: 800px;
  margin: 24px auto;
  padding: 32px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.feedback-header {
  text-align: center;
  margin-bottom: 32px;
}

.feedback-header h2 {
  font-size: 28px;
  color: #333;
  margin-bottom: 8px;
}

.feedback-header p {
  color: #666;
  font-size: 16px;
}

.feedback-form {
  margin-top: 24px;
}

.feedback-select {
  width: 100%;
}

.feedback-textarea :deep(.el-textarea__inner) {
  background: #f9f9f9;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  padding: 12px;
  font-size: 14px;
}

.contact-input :deep(.el-input__wrapper) {
  background: #f9f9f9;
  border-radius: 8px;
}

.submit-button {
  width: 100%;
  height: 44px;
  font-size: 16px;
  border-radius: 8px;
  background: linear-gradient(45deg, #409EFF, #36cfc9);
  border: none;
  margin-top: 24px;
}

.submit-button:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  .feedback-container {
    margin: 16px;
    padding: 20px;
  }
}
</style> 